<template>
 <keep-alive>
    <div>
    <Card>
      <div class="apply-container">
        <Row>
          <i-col span="18">
            <Row>
              <i-col span="4">
                <Select v-model="applyType" style="width: 100%" clearable placeholder="申请类型">
                  <Option
                    v-for="item in applyTypeList"
                    :key="item.key"
                    :value="item.key"
                  >{{item.value}}</Option>
                </Select>
              </i-col>
              <i-col span="8" offset="1">
                <DatePicker
                  type="daterange"
                  v-model="dateRange"
                  placement="bottom-start"
                  placeholder="开始日期 ~ 结束日期"
                  :editable="false"
                  style="width: 100%"
                ></DatePicker>
              </i-col>
            </Row>
          </i-col>
          <i-col span="6" style="text-align:right">
            <Button type="primary" @click="query(1)">查询</Button>
            <Button type="default" @click="reset()" style="margin-left: 10px;">重置</Button>
          </i-col>
        </Row>
        <Row v-for="item in applicationList" :key="item.index" class="card-row">
          <div @click="toDetail(item)" style="cursor:pointer;">
            <Card>
              <Row>
                <i-col span="20">
                  <b style="font-size:18px">{{item.applyType}}</b>
                  <Tag :color="item.color" style="margin-left:10px">{{item.state}}</Tag>
                </i-col>
                <i-col span="4" style="color:rgba(0,0,0,0.45)">{{item.createTime}}</i-col>
              </Row>
              <Row style="margin-top:10px">
                <i-col span="21" class="information-title">
                  <span v-html="item.detail1"></span>
                </i-col>
              </Row>
            </Card>
          </div>
        </Row>
        <Row type="flex" justify="end" style="margin-top:20px">
          <i-col>
            <Page @on-change="pageChange" style="float:right" :total="total" :current="pageIndex" />
          </i-col>
        </Row>
      </div>
    </Card>
  </div>
 </keep-alive>
</template>

<script>
import util from "../../../util/util";
export default {
  data() {
    return {
      applyType: "", // 类型
      dateRange: [], // 开始日期 ~ 结束日期
      applicationList: [], // 申请列表
      applyTypeList: [],
      pageIndex: 1,
      pageSize: 10,
      pageSizeOptions: [5, 10, 15, 20],
      total: 0,
      pageObj: "",
      jsonData:{},
    };
  },
  methods: {
    // 进入详细信息页面
    toDetail(item) {
      this.$router.push({
        // name: "applicationDetails",
        path: "applicationDetails",
        query: {
          item: item
        }
      });
    },

    // 查询按钮
    query(e) {
      console.log("点击")
      // this.pageIndex = 1;
      if (this.dateRange[0]) {
        var date1 = new Date(this.dateRange[0]).toJSON();
        var date2 = new Date(+new Date(date1) + 8 * 3600 * 1000).toISOString();
        var date3 = new Date(this.dateRange[1]).toJSON();
        var date4 = new Date(+new Date(date3) + 8 * 3600 * 1000).toISOString();
        date4 = date4.replace("00", "24");
      } else {
        date2 = this.dateRange[0];
        date4 = this.dateRange[1];
      }
      let obj = {
        applyType: this.applyType,
        startTime: date2,
        endTime: date4,
        index: e === 1 ? this.pageIndex = 1 : this.pageIndex,
        pageSize: 10,
        uid: "1"
      };
      this.pageObj = obj;
      this.$router.push({
          path: this.$router.path,
          query: this.pageObj
        })
      this.api.selectByExample(obj).then(res => {
        if (res.code == 200 && res.data != null) {
          this.applicationList = res.data.records;
          this.total = res.data.total;
          this.applicationList.forEach(element => {
            if (element.detail1) {
              let elementArray = []
              if(element.applyType=="外出"){
                let det1 = '开始时间：'+(element.startTime).substring(0,16)+',结束时间：'+(element.endTime).substring(0,16)+',外出地点：'+element.place+ (element.reason ? (',请假事由：'+element.reason): "',请假事由：''")
                // let elementArray = element.detail1.split(",");
                elementArray = det1.split(",");

              }else{
                elementArray = element.detail1.split(",");

              }

              element.detail1 = "";
              if (elementArray.length > 3) {
                for (let i = 0; i < elementArray.length; i++) {
                  if (i == 2) {
                    element.detail1 += elementArray[i] + "<br>";
                    continue;
                  }
                  element.detail1 +=
                    elementArray[i] +
                    "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
                }
              } else {
                for (let i = 0; i < elementArray.length; i++) {
                  element.detail1 +=
                    elementArray[i] +
                    "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
                }
              }
            }
            if (element.state) {
              switch (element.state) {
                case "已驳回":
                  element.color = "error";
                  break;
                case "审批中":
                  element.color = "warning";
                  break;
                case "已通过":
                  element.color = "success";
                  break;
                case "已撤销":
                  element.color = "default";
                  break;
                default:
                  element.color = "default";
                  break;
              }
            }
          });
        } else {
          this.applicationList = [];
          this.total = 0;
          this.$Message.info(res.msg);
        }
      });
    },

    //分页查询
    pageQuery() {
      this.pageObj.index = this.pageIndex;
      this.$router.push({
        path: this.$router.path,
        query: this.pageObj
      })
      this.api.selectByExample(this.pageObj).then(res => {
        if (res.code == 200 && res.data.total > 0) {
          this.applicationList = res.data.records;
          this.total = res.data.total;
          this.applicationList.forEach(element => {
            if (element.detail1) {
              let elementArray = element.detail1.split(",");
              element.detail1 = "";
              if (elementArray.length > 3) {
                for (let i = 0; i < elementArray.length; i++) {
                  if (i == 2) {
                    element.detail1 += elementArray[i] + "<br>";
                    continue;
                  }
                  element.detail1 +=
                    elementArray[i] +
                    "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
                }
              } else {
                for (let i = 0; i < elementArray.length; i++) {
                  element.detail1 +=
                    elementArray[i] +
                    "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
                }
              }
            }
            if (element.state) {
              switch (element.state) {
                case "已驳回":
                  element.color = "error";
                  break;
                case "审批中":
                  element.color = "warning";
                  break;
                case "已通过":
                  element.color = "success";
                  break;
                case "已撤销":
                  element.color = "default";
                  break;
                default:
                  element.color = "default";
                  break;
              }
            }
          });
        }
      });
    },

    // 分页设置
    pageChange(pageIndex) {
      this.pageIndex = pageIndex;
      this.pageQuery();
    },

    //重置按钮
    reset() {
      this.applyType = "";
      this.dateRange = [];
      Object.assign(this.$data,this.$options.data())
      this.query();
      this.initialize()
    },

    // 初始化下拉框
    initialize() {
      this.api.getAllApplyType().then(res => {
        if (res.code == 200 && res.data != null) {
          this.applyTypeList = res.data;
        }
      });
    },
  },
  watch: {},
  mounted() {
    // 进入界面查询
    // 初始化下拉框
    this.initialize();
    // 获取url参数
    this.jsonData = util.GetRequest(decodeURI(location.hash)) || {}
    if(this.jsonData.applyType || this.jsonData.index || this.jsonData.endTime){
      this.applyType = this.jsonData.applyType
      this.pageIndex = this.jsonData.index
      let array = []
      array.push(this.jsonData.startTime,this.jsonData.endTime)
      this.dateRange = array
      this.$nextTick(()=>{
        this.query()
      })
    } else {
       this.query()
    }

  },
  computed: {},
  created() {},
  beforeDestroy() {
    this.applyType = null;
    this.dateRange = null;
    this.applicationList = null;
    this.applyTypeList = null;
    this.pageIndex = null;
    this.pageSize = null;
    this.pageSizeOptions = null;
    this.total = null;
    this.pageObj = null;
  }
};
</script>

<style lang="less" scoped>
@import "./index";
@import "./../launchAudit/index.less";
</style>

